import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  Mesh,
  BoxBufferGeometry,
  MeshBasicMaterial,
  TextureLoader,
  AxesHelper,
  Color,
  AmbientLight,
  DirectionalLight,
  Vector3,
  GridHelper,
  ExtrudeBufferGeometry,
  Vector2,
  ShapePath,
  Group,
  Path,
  Shape,
  ShapeBufferGeometry,
  DoubleSide,
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

let camera: PerspectiveCamera, scene: Scene, renderer: WebGLRenderer;
let mesh: Mesh;
let group: Group;

init();
animate();

function init() {
  camera = new PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 15;

  scene = new Scene();
  scene.background = new Color("#b0b0b0");

  let path = getPath();
  let simpleGeometry = new ExtrudeBufferGeometry(path, {
    steps: 2,
    depth: .5,
    bevelEnabled: false,
  });
  let material = new MeshBasicMaterial({
    color: "#f00",
    side: DoubleSide,
  });
  let mesh = new Mesh(simpleGeometry, material);
  mesh.position.set(0, 0, 0);
  mesh.rotateX(Math.PI / 2);
  scene.add(mesh);
  // let directionLight = new DirectionalLight("#fff", 0.6);
  // directionLight.position.set(0.75, 0.75, 1.0).normalize();
  // let ambientLight = new AmbientLight(0xcccccc, 0.2);
  // scene.add(ambientLight);
  // scene.add(directionLight);

  let axes = new AxesHelper(100);
  scene.add(axes);

  let grid = new GridHelper(10, 10);
  scene.add(grid);

  group = new Group();
  scene.add(group);

  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const controls = new OrbitControls(camera, renderer.domElement);
  // renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}

function getPath() {
  const trackShape = new Shape()
    .moveTo(-2, -2)
    .lineTo(-2, 2)
    .lineTo(2, 2)
    .lineTo(2, -2);
  return trackShape;
}
